@use "scss/colors";
@use "scss/variables";

@keyframes grow {
  0% {
    width: 0;
  }

  20% {
    width: 65%;
  }

  50% {
    width: 80%;
  }

  80% {
    width: 95%;
  }

  100% {
    width: 100%;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.bar {
  width: 100%;
  max-width: 370px;
  height: 20px;
  border: variables.$border-thin solid colors.$grey-100;
  border-radius: variables.$border-radius-xs;
  overflow: hidden;
}

.progress {
  width: 100%;
  height: 100%;
  background: colors.$blue-100;
  animation-name: grow;
  animation-timing-function: linear;
  animation-delay: 0s;
}

.textContainer {
  height: 100%;
  opacity: 0;
  animation-name: fade-in;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
